import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../value/font_size.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<StatefulWidget> createState() => _StateHomePage();
}

class _StateHomePage extends State<HomePage> {
  int selectedIndex = 0;

  Widget titleWidget() {
    return Container(
      margin: const EdgeInsets.only(top: 0, bottom: 0, left: 10, right: 10).r,
      width: double.infinity,
      height: 50.w,
      color: Colors.blue[100],
      child: Stack(
        alignment: Alignment.center, //指定未定位或部分定位widget的对齐方式
        children: <Widget>[
          Container(
            child: Text("首页",
                style: TextStyle(
                    color: Colors.black,
                    fontSize: FontSize.fontSizeSmall,
                    fontWeight: FontWeight.bold)),
          ),
          const Positioned(
            left: 18.0,
            child: Text("当前定位"),
          ),
        ],
      ),
    );
  }

  Widget middlePicsWidget() {
    final List<String> imageUrls = [
      "https://iph.href.lu/200x200?bg=f40",
      "https://iph.href.lu/200x200?bg=eee",
      "https://iph.href.lu/200x200?bg=36d",
      "https://iph.href.lu/200x200?bg=1d8",
    ];

    return Container(
      margin: EdgeInsets.only(top: 10, bottom: 0, left: 10, right: 10).r,
      width: double.infinity,
      child: Wrap(
        spacing: 8.0,
        runSpacing: 16.0,
        alignment: WrapAlignment.spaceBetween,
        children: imageUrls
            .map((url) => Image(
                  image: NetworkImage(url),
                  fit: BoxFit.fitWidth,
                  width: 162.w,
                  height: 60.w,
                ))
            .toList(),
      ),
    );
  }

  Widget navFilterWidget() {
    final List<String> tagsOptions = [];
    for (int i = 0; i <= 15; i++) {
      tagsOptions.add('类别:$i');
    }

    /// 选择bar
    return Container(
      margin: EdgeInsets.only(left: 10.w, right: 10.w, top: 10.w),
      height: 50.w,
      width: 1.sw,
      child: ListView.builder(
          scrollDirection: Axis.horizontal,
          shrinkWrap: true,
          itemCount: tagsOptions.length,
          itemBuilder: (context, index) {
            return Container(
              margin: EdgeInsets.only(right: 16.w),
              child: InkWell(
                onTap: () {
                  if (selectedIndex != index) {
                    selectedIndex = index;
                    // refreshData();
                    setState(() {});
                  }
                },
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Container(
                      margin: const EdgeInsets.only(top: 10.0)
                          .r, // 设置所有边的margin为10.0
                      child: Text(
                        tagsOptions[index],
                        style: TextStyle(
                          color: selectedIndex == index
                              ? Colors.black
                              : Colors.black54,
                          fontSize: FontSize.fontSizeDefault,
                        ),
                      ),
                    ),
                    Visibility(
                        visible: selectedIndex == index,
                        child: Container(
                          height: 4.w,
                          width: 30.w,
                          margin: EdgeInsets.only(top: 2.w),
                          decoration: BoxDecoration(
                              color: const Color(0xfffb6f5e),
                              borderRadius:
                                  BorderRadius.all(Radius.circular(2.w))),
                        ))
                  ],
                ),
              ),
            );
          }),
    );
  }

  Widget listWidget() {
    final List<String> fetchList = [];
    for (int i = 0; i <= 30; i++) {
      fetchList.add('标题:$i');
    }
    return Container(
      margin: const EdgeInsets.only(top: 10, bottom: 0, left: 10, right: 10).r,
      width: double.infinity,
      child: Wrap(
        children: fetchList
            .map((item) => Container(
                  margin: const EdgeInsets.only(bottom: 10).r,
                  decoration: BoxDecoration(
                    //背景装饰
                    color: Colors.red[100],
                    borderRadius: BorderRadius.circular(10.0),
                  ),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      ClipRRect(
                        borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(10.w),
                            bottomLeft: Radius.circular(10.w)),
                        child: Image(
                          image: const NetworkImage(
                              'https://iph.href.lu/200x200?bg=f40'),
                          fit: BoxFit.fitWidth,
                          width: 100.w,
                          height: 100.w,
                        ),
                      ),
                      Expanded(
                          child: Padding(
                        padding: const EdgeInsets.only(left: 16.0).w,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: <Widget>[
                            Container(
                                margin: const EdgeInsets.only(top: 16.0).w,
                                child: Text(item,
                                    style: TextStyle(
                                        color: Colors.black,
                                        fontSize: FontSize.fontSizeSmall,
                                        fontWeight: FontWeight.bold))),
                            const Text(
                              '这是超级长超级长超级长超级长超级长超级长超级长超级长的1行描述，我要文本换行',
                              maxLines: 1,
                              overflow: TextOverflow.ellipsis,
                            )
                          ],
                        ),
                      ))
                    ],
                  ),
                ))
            .toList(),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView(
          children: [
            titleWidget(),
            middlePicsWidget(),
            navFilterWidget(),
            listWidget()
          ],
        ),
      ),
    );
  }
}
